<!-- 跑腿员 -->
<template>
	<view class="ErrandRunner">
		<view class="radius12">
			<view class="errand-for f-background border-bottom" v-for="(item,index) in 10" :key="index">
				<view class="label-dis dis-ali">
					<view class="label dis">
						<text class="iconfont icon-gou color-f size-24 font-weight-600"></text>
						<text class=" font-weight-400 color-f size-24">已实名</text>
					</view>
					<view class="label2 dis font-weight-400 color-f size-24">已缴纳保证金</view>
				</view>
				<view class="errand-where">
					<view class="errand-img">
						<image class="width-height100" v-if="item.img" :src="item.img" mode=""></image>
						<!-- <image class="width-height100" v-else src="@/static/default/shy.png" mode=""></image> -->
					</view>
					<view class="between">
						<view class="rand-dis">
							<view class="font-weight-400 color3 size-30">小区网格：</view>
							<text class="font-weight-600 color3 size-30">{{item.name || '王洛勇用'}}</text>
						</view>
						<view class="rand-dis">
							<view class="font-weight-400 color3 size-30">服务工号：</view>
							<text class="font-weight-600 color3 size-30">{{item.jobNumber || '202411'}}</text>
						</view>
						<view class="rand-dis">
							<view class="font-weight-400 color3 size-30">服务订单：</view>
							<text class="font-weight-600 color3 size-30">{{item.countNumber || '100'}}单</text>
						</view>
						<view class="rand-dis">
							<view class="font-weight-400 color3 size-30">服务好评：</view>
							<u-rate readonly size="40rpx" gutter="2rpx" activeColor="#FFAA00" count="5"
								v-model="item.score || value"></u-rate>
						</view>
						<view class="rand-dis">
							<view class="font-weight-400 color3 size-30">联系电话：</view>
							<text class="font-weight-600 color3 size-30">{{item.phone || '1218301240'}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 5
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.ErrandRunner {
		padding: 16rpx;

		.errand-for {
			padding: 32rpx 28rpx;

			.label-dis {
				margin-bottom: 12rpx;
			}

			.label,
			.label2 {
				padding: 4rpx;
				border-radius: 8rpx;
				background: #2BB22A;
				margin-right: 10rpx;
			}

			.label2 {
				background: #FFA319;
			}

			.errand-where {
				display: grid;
				grid-template-columns: 262rpx 1fr;
				grid-gap: 0 14rpx;

				.errand-img {
					width: 262rpx;
					height: 292rpx;
				}

				.rand-dis {
					display: grid;
					align-items: center;
					grid-template-columns: 150rpx 1fr;
				}
			}
		}
	}
</style>